<template>
  <div>
    <Card title="利润表">
      <div class="operTime">
        <span>时间：</span>
        <DatePicker
          type="daterange"
          :options="optionTime"
          format="yyyy-MM-dd"
          @on-change="handleChange"
          :value="startTime"
          :editable="false"
          split-panels
          style="width: 300px"
        ></DatePicker>
        <Button type="primary" @click="query">查询</Button>
        <Button type="success" @click="orderExport">导出</Button>
      </div>
      <div class="tabsList">
        <Table
          class="table-all-width"
          :columns="columnsOne"
          :data="dataOne"
          :stripe="true"
          :border="true"
          :loading="Tableloading"
        >
          <template slot="actions" slot-scope="{ row }">
            <div>
              <a href="#" class="cha" @click="particulars(row.rangeDate)"
                >查看明细</a
              >
            </div>
          </template>
        </Table>
      </div>
      <div class="collect">
        <p>汇总</p>
        <Table
          class="table-all-width"
          :columns="columnsTwo"
          :data="dataTwo"
          :stripe="true"
          :border="true"
          :loading="Tableloading"
        >
        </Table>
      </div>

      <Modal
        :mask-closable="false"
        class="formTop"
        v-model="flag"
        title="利润表明细"
        width="90%"
        @on-cancel="closeModal"
        :showConfirmButton="false"
      >
        <div class="tabsList" v-if="flag">
          <!-- <p>明细</p> -->
          <Table
            class="table-all-width"
            :columns="columnsThree"
            :data="dataThree"
            :stripe="true"
            :border="true"
            :loading="Tableloading"
          >
          </Table>
          <div class="right">
            <Page
              :total="total"
              :current.sync="pageNum"
              :page-size="pageSize"
              show-sizer
              @on-change="changePage"
              @on-page-size-change="changePageSize"
            />
          </div>

        </div>
        <div class="collect" v-if="flag">
          <p>汇总</p>
          <Table
            class="table-all-width"
            :columns="columnsFour"
            :data="dataFour"
            :stripe="true"
            :border="true"
            :loading="Tableloading"
          >
          </Table>
        </div>

      </Modal>
    </Card>
  </div>
</template>

<script>
import { Format } from "@/assets/util";
import storage from "@/libs/storage";
import {
  orderOperateStatistics,
  incomeStatement,
  summarizing,
  queryDetails,
  codeMaintenance,
  orderExportOperateStatisticsExcel as orderExport
} from "@/api/order";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      Tableloading: true,
      flag: false,
      tian: '',
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dataValue: [],
      optionTime: {
        shortcuts: [
          {
            text: "今日",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              start.setTime(start.getTime());
              end.setTime(end.getTime());
              return [start, end];
            }
          },
          {
            text: "昨日",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);
              end.setHours(0, 0, 0, 0);

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 0.001);
              return [start, end];
            }
          },
          {
            text: "本周",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              let weekDay = start.getDay();
              let distance = weekDay - 1;
              if (weekDay === 0) {
                distance = 6;
              }

              start.setTime(start.getTime() - 3600 * 1000 * 24 * distance);
              end.setTime(end.getTime());
              return [start, end];
            }
          },
          {
            text: "本月",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              let firstDayOfMonth = new Date(
                start.getFullYear(),
                start.getMonth(),
                1
              );
              firstDayOfMonth.setTime(firstDayOfMonth.getTime());
              return [firstDayOfMonth, end];
            }
          },
          {
            text: "上月",
            value() {
              let nowData = new Date();
              let currentMonth = nowData.getMonth();
              let currentYear = nowData.getFullYear();
              let start = new Date(currentYear, currentMonth - 1, 1);
              let end = new Date(currentYear, currentMonth, 0);
              return [start, end];
            }
          }
        ]
      },
      startTime: [],
      columnsOne: [
        {
          title: "No",
          type: "index",
          width: 60,
          minWidth: 60,
          align: "center",
          className: "td-index"
        },
        {
          title: "日期",
          key: "rangeDate",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "交易笔数",
        //     key: "tradeCount",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "订单金额",
          key: "billMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "优惠金额",
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "会员优惠金额", // 新加 key需要换  是否是折扣金额
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "积分折扣金额",
          key: "integralDeductionMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "实收金额",
          key: "realMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "成本",
          key: "costMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "欠款金额",
        //     key: "arrearsMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "毛利",
          key: "profitMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "退货金额",
        //     key: "returnMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "毛利率",
          key: "profitRate",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "免单金额",
        //     key: "freeMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "操作",
          key: "giveMoney",
          slot: "actions",
          align: "center",
          headerAlign: "center"
        }
        //   {
        //     title: "赠送金额",
        //     key: "giveMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },

        //   {
        //     title: "应收单均",
        //     key: "receivableOrderAverage",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        //   {
        //     title: "应收金额",
        //     key: "money",
        //     align: "center",
        //     headerAlign: "center"
        //   },
      ],
      columnsTwo: [
        {
          title: "总订单金额",
          key: "billMoneyTotal",
          width: 80,
          minWidth: 60,
          align: "center",
          className: "td-index"
        },
        {
          title: "总优惠金额",

          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "交易笔数",
        //     key: "tradeCount",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "总会员优惠金额",
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总积分抵扣金额",
          key: "integralDeductionMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总实收金额",
          key: "realMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总成本",
          key: "costMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "毛利",
          key: "profitMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "毛利率",
          key: "profitRate",
          align: "center",
          headerAlign: "center"
        }
        //   {
        //     title: "欠款金额",
        //     key: "arrearsMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "毛利",
        //   key: "returnMoney",
        //   align: "center",
        //   headerAlign: "center",
        // },
        //   {
        //     title: "退货金额",
        //     key: "returnMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "毛利率",
        //   key: "freeMoney",
        //   align: "center",
        //   headerAlign: "center",
        // },
        //   {
        //     title: "免单金额",
        //     key: "freeMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "操作",
        //   key: "giveMoney",
        //   slot: "actions",
        //   align: "center",
        //   headerAlign: "center",

        // },
        //   {
        //     title: "赠送金额",
        //     key: "giveMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },

        //   {
        //     title: "应收单均",
        //     key: "receivableOrderAverage",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        //   {
        //     title: "应收金额",
        //     key: "money",
        //     align: "center",
        //     headerAlign: "center"
        //   },
      ],
      columnsThree: [
        {
          title: "No",
          type: "index",
          width: 60,
          minWidth: 60,
          align: "center",
          className: "td-index"
        },
        {
          title: "日期",
          key: "rangeDate",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "交易笔数",
        //     key: "tradeCount",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "商品条码",
          key: "productBarcode",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "商品名称",
          key: "productName",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "销售数量",
          key: "saleCountTotal",
          align: "center",
          headerAlign: "center",
          width: 90
        },
        {
          title: "订单金额",
          key: "billMoneyTotal",
          align: "center",
          headerAlign: "center",
          width: 90
        },
        {
          title: "优惠金额",
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "会员优惠金额",
          key: "preferentialMoneyTotalOfVip",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "欠款金额",
        //     key: "arrearsMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "积分抵扣金额",
          key: "integralDeductionMoneyTotal",
          align: "center",
          headerAlign: "center",
          width: 100
        },
        {
          title: "实收金额",
          key: "realMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "成本",
          key: "costMoneyTotal",
          align: "center",
          headerAlign: "center",
          width: 70
        },
        {
          title: "毛利",
          key: "profitMoneyTotal",
          align: "center",
          headerAlign: "center",
          width: 70
        },

        {
          title: "毛利率",
          key: "profitRate",
          align: "center",
          headerAlign: "center",
          width: 80
        }
        //   {
        //     title: "免单金额",
        //     key: "freeMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "操作",
        //   key: "giveMoney",
        //   slot: "actions",
        //   align: "center",
        //   headerAlign: "center",

        // },
        //   {
        //     title: "赠送金额",
        //     key: "giveMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },

        //   {
        //     title: "应收单均",
        //     key: "receivableOrderAverage",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        //   {
        //     title: "应收金额",
        //     key: "money",
        //     align: "center",
        //     headerAlign: "center"
        //   },
      ],
      columnsFour: [
        {
          title: "总订单金额",
          key: "billMoneyTotal",
          width: 80,
          minWidth: 60,
          align: "center",
          className: "td-index"
        },
        {
          title: "总优惠金额",
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        //   {
        //     title: "交易笔数",
        //     key: "tradeCount",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        {
          title: "总会员优惠金额",
          key: "preferentialMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总积分抵扣金额",
          key: "integralDeductionMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总实收金额",
          key: "realMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "总成本",
          key: "costMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "毛利",
          key: "profitMoneyTotal",
          align: "center",
          headerAlign: "center"
        },
        {
          title: "毛利率",
          key: "profitRate",
          align: "center",
          headerAlign: "center"
        }
        //   {
        //     title: "欠款金额",
        //     key: "arrearsMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "毛利",
        //   key: "returnMoney",
        //   align: "center",
        //   headerAlign: "center",
        // },
        //   {
        //     title: "退货金额",
        //     key: "returnMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "毛利率",
        //   key: "freeMoney",
        //   align: "center",
        //   headerAlign: "center",
        // },
        //   {
        //     title: "免单金额",
        //     key: "freeMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        // {
        //   title: "操作",
        //   key: "giveMoney",
        //   slot: "actions",
        //   align: "center",
        //   headerAlign: "center",

        // },
        //   {
        //     title: "赠送金额",
        //     key: "giveMoney",
        //     align: "center",
        //     headerAlign: "center"
        //   },

        //   {
        //     title: "应收单均",
        //     key: "receivableOrderAverage",
        //     align: "center",
        //     headerAlign: "center"
        //   },
        //   {
        //     title: "应收金额",
        //     key: "money",
        //     align: "center",
        //     headerAlign: "center"
        //   },
      ],

      dataOne: [],
      dataTwo: [],
      dataThree: [],
      dataFour: []
    };
  },
  methods: {
    particulars(rangeDate) {
      //     this.$router.push({
      //         name:"operateStatistics"
      //   });
      console.log(rangeDate,101);
      this.tian = rangeDate
      this.flag = !this.flag;
      this.queryDetails(rangeDate);
      this.codeMaintenance(rangeDate);
    },
    closeModal() {
      this.dataFour = [];
    },
    init() {
      let newTimeDate = new Date();
      this.startTime = [
        Format(newTimeDate, "yy-MM-dd"),
        Format(newTimeDate, "yy-MM-dd")
      ];
      this.dataValue = [
        Format(newTimeDate, "yy-MM-dd"),
        Format(newTimeDate, "yy-MM-dd")
      ];
      //   this.orderOperateStatistics();
      this.incomeStatement();
      this.summarizing();
    },
    BetDay() {
      let timeBet = this.daysBetween(this.dataValue[0], this.dataValue[1]);
      if (timeBet > 60) {
        this.$Message.error("最多查询两个月数据");
      } else {
        // this.orderOperateStatistics();
        this.incomeStatement();
        this.summarizing();
        this.dataTwo = [];
      }
    },
    daysBetween(sDate1, sDate2) {
      var dateSpan, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    // 查询
    query() {
      this.BetDay();
    },
    // 分页
    changePage(pageNum) {
      this.pageNum = pageNum;
      //   this.orderOperateStatistics();
      this.queryDetails();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.queryDetails();
    },
    // 触发日历
    handleChange(daterange) {
      this.dataValue = daterange;
    },

    async incomeStatement() {
      const item = {
        beginDate: this.dataValue[0],
        endDate: this.dataValue[1]
      };
      const { data } = await incomeStatement(item);
      if (data.code == 200) {
        this.total = data.data.total;
        this.dataOne = data.data;

        setTimeout(() => {
          this.Tableloading = false;
        }, 1000);
      } else {
        this.$Message.error(data.message);
      }
    },

    async summarizing() {
      let item = {
        beginDate: this.dataValue[0],
        endDate: this.dataValue[1]
      };

      const { data } = await summarizing(item);
      if (data.code == 200) {
        console.log(123);
        this.total = data.data.total;
        this.dataTwo.push(data.data);
        setTimeout(() => {
          this.Tableloading = false;
        }, 1000);
      } else {
        this.$Message.error(data.message);
      }
    },
    async queryDetails() {
      let item = {
        page: this.pageNum,
        pageSize: this.pageSize,
        rangeDate: this.tian
      };

      const { data } = await queryDetails(item);
      if (data.code == 200) {
        console.log(123);
        this.total = data.data.total;
        this.dataThree = data.data.list;
        setTimeout(() => {
          this.Tableloading = false;
        }, 1000);
      } else {
        this.$Message.error(data.message);
      }
    },
    async codeMaintenance(rangeDate) {
      let item = {
        rangeDate: rangeDate
      };

      const { data } = await codeMaintenance(item);
      if (data.code == 200) {
        console.log(123);
        this.total = data.data.total;
        this.dataFour.push(data.data);
        setTimeout(() => {
          this.Tableloading = false;
        }, 1000);
      } else {
        this.$Message.error(data.message);
      }
    },

    async orderExport() {
      console.log("orderExport");
      const item = {
        beginTime: this.dataValue[0],
        endTime: this.dataValue[1],
        storeList: [this.$store.state.storeInfo.storeCode]
      };
      const { data, status } = await orderExport(item);
      if (status == 200) {
        let newTimeDate = new Date();
        let storeInfoJSON = localStorage.getItem("storeInfo");
        let storeInfo = JSON.parse(storeInfoJSON);
        let storeName = storeInfo.storeName;
        let date = Format(newTimeDate, "yy年MM月dd日hh时mm分ss秒");
        saveAs(data, storeName + "—营运统计报表—" + date + ".xls");
      }
    }
  },
  mounted: function () {
    this.init();
  }
};
</script>

  <style scoped>
.operTime button {
  margin-left: 15px;
}
.tabsList {
  margin-top: 15px;
}
.cha {
  color: blue;
}
.collect {
  margin-top: 20px;
  color: red;
}
.right{
    margin-top: 20px;
    text-align: right;
}

</style>
